<template>
  <div class="study-plan">
    <van-nav-bar
      title="报名中心"
      placeholder
      fixed
      left-arrow
      @click-left="back"
    />
    <div class="study-plan__content" v-if="active == 0">
      <ImgCard1
        @clickItem="clickItem"
        v-for="(item, index) in objData1"
        :key="index"
        :objData="item"
      ></ImgCard1>
    </div>
    <div class="study-plan__content" v-if="active == 1">
      <ImgCard
        @clickItem="clickItem"
        v-for="(item, index) in objData"
        :key="index"
        :objData="item"
      ></ImgCard>
    </div>

    <div class="tabbar">
      <van-tabbar v-model="active">
        <van-tabbar-item>
          <span>待报名</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>已报名</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import ImgCard from "./components/ImgCard.vue";
import ImgCard1 from "./components/ImgCard1.vue";
export default {
  components: {
    ImgCard,
    ImgCard1,
  },
  data() {
    return {
      objData: [
        {
          title: "短视频运营",
          desc: "描述描述描述描述描述",
          tags: [
            {
              title: "审核已通过",
              tagColor: "#00AD6F",
              tagBgColor: "#D8F3E5",
            },
          ],
        },
        {
          title: "短视频运营",
          desc: "描述描述描述描述描述",
          tags: [
            {
              title: "审核已通过",
              tagColor: "#ffffff",
              tagBgColor: "#FFA940",
            },
          ],
        },
        {
          title: "短视频运营",
          desc: "描述描述描述描述描述",
          tags: [
            {
              title: "审核已通过",
              tagColor: "#ffffff",
              tagBgColor: "#FFA940",
            },
          ],
        },
        {
          title: "短视频运营",
          desc: "描述描述描述描述描述",
          tags: [
            {
              title: "审核已通过",
              tagColor: "#ffffff",
              tagBgColor: "#FFA940",
            },
          ],
        },
        {
          title: "短视频运营",
          desc: "描述描述描述描述描述",
          tags: [
            {
              title: "审核已通过",
              tagColor: "#ffffff",
              tagBgColor: "#FFA940",
            },
          ],
        },
      ],
      objData1: [
        {
          title: "短视频运营",
          desc: "描述描述描述描述描述",
        },
      ],
      active: 0,
      icon: {
        active: "https://img.yzcdn.cn/vant/user-active.png",
        inactive: "https://img.yzcdn.cn/vant/user-inactive.png",
      },
    };
  },
  methods: {
    back() {
      window.history.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.study-plan {
  background: #f5f9fc;
  min-height: 100vh;
  ::v-deep(.van-nav-bar__placeholder) {
    background: #ffffff;
  }
  &__content {
    padding: 12px 16px 51px;
  }
  .tabbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(0px);
    height: 50px;
  }
}
</style>
